<template>
  <div class="login">
      <div class="login-container ">
          <p class="login-l">登录账号</p>
          <section class="login-x">虾米 - 严选商城欢迎您</section>

        <div class="formlogin">
                <input type="text" @blur="bluruser" v-model="user.mobile" :style="yangshi" >
                <input type="password" v-model="password" @blur="blurpwd" :style="pwdyangshi">
                <button class="btn" @click="loginIn">登录</button>
                <p>忘记密码</p>
                <router-view>还没有注册？立即注册</router-view>
        </div>
        <div class="login-head" :style="loginHead">
            <van-icon name="clear" />
            <span>{{ str }}</span>
        </div>
      </div>
 </div>
</template>

<script>
import { loginto } from '../utils/api'
export default {
  name: 'login',
  data() { 
    return {
        yangshi:"",
        pwdyangshi:"",
        password:'',
        login:false,
        user:{
            mobile:"",
            pwd:""
        },
        str:'',
        loginHead:''
    }
  },
  created() {

  },
  methods:{
    bluruser(){
        if (this.user.mobile != 13500000000) {
            this.yangshi={
            "border-style": "solide",
            "border-size":"0.01rem",
            "border-color":"red",
            "background":"rgb(255, 233, 228)",
            color: "rgb(196, 186, 183)",
            }
            this.login = false
        }else{
            this.yangshi={
            "border-style": "solide",
            "border-size":"0.01rem",
            "border-color":"green",
            "background":"rgb(225, 255, 223)",
            color: "rgb(196, 186, 183)",
            }
            this.login = true
        }
    },
    blurpwd(){
        this.user.pwd = Number(this.password)
        if (this.user.pwd === "") {
            this.pwdyangshi={
                "border-style": "solide",
                "border-size":"0.01rem",
                "border-color":"red",
                "background":"rgb(255, 233, 228)",
                color: "rgb(196, 186, 183)",
            }
        }else{
            this.pwdyangshi={
                "border-style": "solide",
                "border-size":"0.01rem",
                "border-color":"green",
                "background":"rgb(225, 255, 223)",
                color: "rgb(196, 186, 183)",
            }  
        }
    },
    loginIn(){
        if (this.login) {  
            loginto(this.user).then(res=>{
                // this.$store.commit('addtoken', res.data)
                // var token = JSON.stringify(.) 

                localStorage.setItem('token',res.data.token)
            })
            this.$router.back()
        }else{
            this.loginHead = {
                transition: "all 1s",
                top : '1rem'
            }
            if(this.user.mobile === ""){
                this.str = "请输入账号密码"
                
            }else if(this.user.mobile !== "13500000000"){
                this.str = "用户名或密码不正确"
              
            }
            setTimeout(()=>{
                    this.loginHead = {
                        // display:"none",
                        top : '-1rem',
                        transition: "none",
                    }
            },1000)
        }
    }


  },
 }
</script>

<style lang="scss" scoped>
.login{
    width: 100%;
    height: 100%;
    padding: 0.7rem;
}
.btn{
    width: 80%;
    height: 1rem;
    border-radius: 0.2rem;
    color: white;
    text-align: center;
    margin-top: 0.3rem;
    background-image: linear-gradient(to right,#e570e7 ,#79f1fc);
    border: none;
    margin-bottom: 0.2rem;
}

.login-container{
    width: 100%;
    height: 100%;
    font-size: 0.32rem;
    border: 0.02px solid #F5F5F5;
    border-radius: 0.05rem;
    padding: 0.7rem;
}
.login-l{
    font-size: 0.4rem;
    color: #666;
}
.login-x{
    margin-top: 0.4rem;
    font-size: 0.28rem;
    color: #666;
}
.formlogin{
    width: 100%;
    height: 3rem;
    margin-top: 0.4rem;
    text-align: center;
    input{
        width: 100%;
        height: 0.8rem;
        border: 0.01rem solid #F5F5F5;
        border-radius: 0.1rem;
        background-color: #F5F5F5;
        margin-bottom: 0.4rem;
    }
}
.login-head{
    width: 100%;
    height: 1rem;
    text-indent: 0.4rem;
    line-height: 1rem;
    font-size: 0.28rem;
    left: 0;
    top: -1rem;
    // display: none;
    position: fixed;
    background-color: rgba($color: #fef0f0, $alpha: .6) ;
    color: red;
    span{
        margin-left: 0.3rem;
    }
}
</style>